<template>
  <div class="PageA">
    <navbar>
      <div slot="right" class="right-img">
          <img @click="searchImg" src="../../assets/img/sou.png" />
      </div>
      <div slot="center">爱情详情</div>
      <div slot="left" class="left-img">
          <img @click="fan" src="../../assets/img/la.png" alt="" />
      </div>
    </navbar>

    <div class="contentC">
      <div class="navbar">
        <span
          v-for="(item, index) in navbar"
          :key="index"
          @click="changeBar(index)"
          :style="{ color: navIndex == index ? 'red' : 'black' }"
          >{{ item }}</span
        >
      </div>

      <div class="newlist">
        <div
          class="news"
          v-for="item in group"
          :key="item.id"
          @click="good(item.id)"
        >
          <router-link tag="div" @click="chage()" to="">
            <h2>{{ item.title }}</h2>
            <div class="bar">
              <div class="barA"><img :src="item.img" alt="" /></div>
              <div class="barA"><img :src="item.img" alt="" /></div>
              <div class="barA"><img :src="item.img" alt="" /></div>
              <div class="barA"><img :src="item.img" alt="" /></div>
            </div>
            <div class="barOne">
              <span>{{ item.headportrait }}</span>
              <span>{{ item.name }}</span>
              <span>{{ item.minute }}</span>
              <span>回复{{ item.reply }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../components/navbar/navbar";
export default {
  name: "LoveDetail",
  components: {
    navbar,
  },
  methods: {
    searchImg: function(){
      const { power } = this.$store.state.user;
      if (power < 2) {
        alert("你的权限等级不够");
        return;
      }else if(power > 2){
        this.$router.push('/recommend')
      }
    },
    fan() {
      this.$router.back();
    },
    good(id) {
      if (id == 1) {
        this.$router.push("/LoveDetail/ForumDetail");
      } else if (id == 2) {
        this.$router.push("/LoveDetail/ForumDetail");
      }
    },
    changeBar(i) {
      this.navIndex = i;
    },
    chage() {
      this.userList.sort((a, b) => {
        return new Date(b.createTime) > new Date(a.createTime) ? 1 : -1;
      });
    },
  },

  data() {
    return {
      navbar: ["最新发帖", "精品热帖", "人气最高"],
      navIndex: 0,
      group: [
        {
          id: 1,
          title: "帖子主题，一起去旅行！",
          img: require("../../assets/img/0.jpg"),
          headportrait: "头像",
          name: "小芳",
          minute: "10分钟前",
          reply: "1",
        },
        {
          id: 2,
          title: "帖子主题，一起去旅行！",
          img: require("../../assets/img/0.jpg"),
          headportrait: "头像",
          name: "小芳",
          minute: "10分钟前",
          reply: "2",
        },
        {
          id: 3,
          title: "帖子主题，一起去旅行！",
          img: require("../../assets/img/0.jpg"),
          headportrait: "头像",
          name: "小芳",
          minute: "10分钟前",
          reply: "3",
        },
      ],
    };
  },
};
</script>

<style scoped>
.navbar {
  border-top: 1px solid rgb(207, 207, 207);
  height: 40px;
  display: flex;
  text-align: center;
  line-height: 40px;
  position: sticky;
  top: 50px;
  border-bottom: 1px solid black;
}

.navbar span {
  flex: 1;
}

.newlist {
  margin-top: 40px;
}

.news {
  display: flex;
  flex-flow: column;
  border-bottom: 1px solid black;
}

.news h2 {
  text-align: left;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgb(116, 116, 116);
  margin: 10px 0px 10px 15px;
}

.bar {
  display: flex;
  width: 100%;
}

.barA {
  flex: 1;
  margin: 5px;
}

.barA:nth-of-type(1) {
  margin-left: 15px;
}

.barA:nth-of-type(4) {
  margin-right: 15px;
}

.barA img {
  height: 70px;
  width: 100%;
  object-fit: cover;
}

.barOne {
  margin: 10px 0;
  line-height: 50px;
  height: 50px;
  display: flex;
}

.barOne span:nth-of-type(1) {
  width: 50px;
  height: 50px;
  margin-left: 15px;
  text-align: center;
  border-radius: 50px;
  line-height: 50px;
  background-color: rgb(196, 193, 32);
}

.barOne span:nth-of-type(2) {
  margin-left: 10px;
}

.barOne span:nth-of-type(3) {
  margin-left: 15px;
}

.barOne span:nth-of-type(4) {
  flex: 1;
  margin-right: 20px;
  text-align: right;
}

.left-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}

.right-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>
